import React from 'react';
import './index.less';
import CommonHeader from 'COMPONENT/CommonHeader';
import PropTypes from 'prop-types';
import { Modal } from 'antd-mobile';
const alert = Modal.alert;

export default class Login extends React.Component {
static contextTypes = {
      router: PropTypes.object.isRequired
  }

  constructor(props) {
    super(props);
    this.state = {

    }
  }


  componentWillMount() {

  }

  go=()=>{
     alert('功能开发中..')
  }


  render() {

    return(
      <div  className='pay'>
        <header className="header">
         <CommonHeader  name='生活缴费'  leftContentTitle="@back"  
		leftContent="返回" />
        </header>
        <div style={{height:'1.2rem'}}></div>
        <div className='payFee'>
          <p>+新增交费 <span><img src="./imgs/address.png"/> 南京市</span></p>
          <ul>
            <li onClick={this.go.bind(this)}>
              <img src="./imgs/sf.png" alt=""/>
              <p>水费</p>
            </li>
            <li onClick={this.go.bind(this)}>
              <img src="./imgs/df.png" alt=""/>
              <p>电费</p>
            </li>
            <li onClick={this.go.bind(this)}>
              <img src="./imgs/rqf.png" alt=""/>
              <p>燃气费</p>
            </li>
            <li onClick={this.go.bind(this)}>
              <img src="./imgs/yxds.png" alt=""/>
              <p>有线电视</p>
            </li>
            <li onClick={this.go.bind(this)}>
              <img src="./imgs/gh.png" alt=""/>
              <p>固话</p>
            </li>
            <li onClick={this.go.bind(this)}>
              <img src="./imgs/kd.png" alt=""/>
              <p>宽带</p>
            </li>
            <li onClick={this.go.bind(this)}>
              <img src="./imgs/wyf.png" alt=""/>
              <p>物业费</p>
            </li>

          </ul>
        </div>



      </div>
      )

  }
}